<template>
  <div class="data_input">
    <!-- 省市区级联选择器 -->
    <div class="pca">
      <el-cascader-panel 
      @change="pcaChange"  
      v-model="form.pca"
      :props="{label:'name',value:'name'}"
      :options="pca"></el-cascader-panel>
    </div>
    <!-- 表单 -->
    <div class="form">
      <el-row>
        <el-col :span="12">
          <el-form label-width="80px" size="small">
            <el-form-item label="确诊">
              <el-input v-model="form.confirmed"></el-input>
            </el-form-item>
            <el-form-item label="疑似">
              <el-input v-model="form.suspected"></el-input>
            </el-form-item>
            <el-form-item label="死亡">
              <el-input v-model="form.dead"></el-input>
            </el-form-item>
            <el-form-item label="治愈">
              <el-input v-model="form.cure"></el-input>
            </el-form-item>
            <el-form-item label="重症">
              <el-input v-model="form.severe"></el-input>
            </el-form-item>
            <el-form-item label="境外输入">
              <el-input v-model="form.outside"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button size="small" type="primary" @click="submit"> 提交 </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" style="padding:0 1em;color:red;font-size:10px">
          <div>温馨提示：</div>
          <div>
            <p>1. 选中城市</p>
            <p>2. 录入数据</p>
            <p>疫情防控，众志成城</p>
          </div>
        </el-col>
      </el-row>
    </div>
   <!-- {{form}} -->
  </div>
</template>

<script>
import pca from '@/assets/pca.json'
import {get,post} from '@/utils/request'
import moment from 'moment'
export default {
  data(){
    return {
      pca,
      form:{
        country:'中国'
      }
    }
  },
  methods:{
    submit(){
       // 将form数据进行克隆
      let data = Object.assign({},this.form)
       // 如果是更新操作，无需处理省市区
      if(!this.form.id){
        data.province = this.form.pca[0];
        data.city = this.form.pca[1];
        data.area = this.form.pca[2];
        delete data.pca;
      }
      // 交互
      let url = "/epidemic/saveOrUpdate"
      post(url,data).then(response => {
        this.$message({type:"success",message:response.message})
      })
    },
    // 当地理位置发生变化的时候
    pcaChange(val){
      // 获取当前时间 2020-09-02
      let inputTime = moment(new Date().getTime()).format("YYYY-MM-DD");
      let param = {
        page :1,
        pageSize:10,
        province:val[0],
        city:val[1],
        area:val[2],
        inputTime
      }
      let url = "/epidemic/pageQuery"
      get(url,param).then(response =>{
        let resp = response.data;
        // 有数据，之前录入了，修改
        if(resp.total>0){
          this.form = resp.list[0];
        } else {
          //如果没有数据，保留默认值，一定要有pca
          this.form = { country:"中国",pca:this.form.pca}
        }
      })
    }
  }
}
</script>

<style scoped>
.pca {
  margin-bottom: .5em;
}
.form {
  width: 500px;
}
</style>